// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@use 'sass:math';

@mixin get-check-container-style($height, $border-size: 1px) {
    position: relative;
    width: ($height - $border-size * 2);
    height: ($height - $border-size * 2);
    display: inline-block;
    border-radius: 50%;
    border: $border-size solid $neutral-0;
}

@mixin check-icon-styles($icon-size, $border-size: 1px, $icon-color: $neutral-0) {
    // max-tick-length = iconSize - borderthickness - spacingBetweenCircleAndTick
    $max-tick-length: ($icon-size - $border-size * 2 - 2);
    $check-height: math.div($max-tick-length, 2);
    $bottom-value: (math.div($max-tick-length - $check-height, 2) + 1);
    $left-value: ($bottom-value);
    $check-line-thickness: (math.div(2, 14) * $icon-size);

    .check-container {
        @include get-check-container-style($icon-size, $border-size);

        svg circle {
            fill: $icon-color;
        }
    }
}

@mixin cross-icon-styles($icon-size, $border-size: 1px, $icon-color: $neutral-0) {
    $true-icon-size: ($icon-size - $border-size * 2);
    $width-value: (math.div(2, 14) * $true-icon-size);

    .check-container {
        @include get-check-container-style($icon-size, $border-size);

        $cross-line-height: (math.div(8, 14) * $true-icon-size);
        $bottom-value: math.div($true-icon-size - $cross-line-height, 2);
        $left-value: math.div($true-icon-size - $width-value, 2);

        svg circle {
            fill: $icon-color;
        }
    }
}

@mixin incomplete-icon-styles($icon-size, $border-size: 1px) {
    .check-container {
        @include get-check-container-style($icon-size, $border-size);
    }
}

@mixin inapplicable-icon-styles($icon-size, $border-size: 1px, $icon-color: $neutral-0) {
    $true-icon-size: ($icon-size - $border-size * 2);
    $width-value: (math.div(1, 7) * $true-icon-size);

    .check-container {
        @include get-check-container-style($icon-size, $border-size);

        $inapplicable-line-height: (math.div(4, 7) * $true-icon-size);
        $bottom-value: math.div($true-icon-size - $inapplicable-line-height, 2);
        $left-value: math.div($true-icon-size - $width-value, 2);
    }
}
